<style lang="scss" scoped>
	.content {

		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.tip {
		color: #98A5B3;
		padding: 0 30rpx;
		width: 100%;
	}

	.nav {
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
	}

	.top {
		padding: 20rpx 0;
	}

	.search {
		width: 690rpx;
		height: 68rpx;
		background: #f4f5f7;
		border: 2rpx solid #f5f5f5;
		border-radius: 46rpx;
		margin: 0rpx auto;
		padding: 20rpx;

		.ipt {
			flex: 1;
		}
	}

	.footer {
		width: 100%;
		background-color: white;
		position: fixed;
		bottom: 0;
		left: 0;
		border-top: 1px solid #cccccc;
		padding-left: 30rpx;
		padding-right: 30rpx;
		z-index: 100;
	}

	.box {
		width: 690rpx;
		padding: 30rpx 20rpx;
		background: #ffffff;
		border-radius: 20rpx;
		box-shadow: 0rpx 32rpx 20rpx -20rpx #e6ebf2;
		margin-top: 30rpx;

		.line {
			width: 100%;
			height: 100rpx;
			border-top: 1px solid #eeeeee;

			.ipt {
				width: 500rpx;
				text-align: right;
			}
		}

		.line2 {
			width: 100%;
			border-top: 1px solid #eeeeee;
			align-items: flex-start;

			.des {
				width: 500rpx;
				text-align: justify;
			}
		}

		.sbtn {
			width: 184rpx;
			height: 64rpx;
			background: #fffefe;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}

		.imgboxs {
			width: 100%;
			flex-wrap: wrap;

			.imgbox {
				width: 148rpx;
				height: 148rpx;
				border: 2rpx solid #dee2ee;
				border-radius: 10rpx;
				position: relative;
				margin-right: 18rpx;

				.photo {
					width: 100%;
					height: 100%;

				}

				.close {
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					right: -16rpx;
					top: -16rpx;
				}
			}

			.imgbox:nth-child(4n) {

				margin-right: 0rpx;
			}
		}
	}

	.btns {
		.btn {

			padding: 10rpx 30rpx;
			border: 2rpx solid #409eff;
			border-radius: 34rpx;
		}
	}


	.mbtn {
		width: 330rpx;
		height: 88rpx;
		opacity: 1;
		border: 2rpx solid #409eff;
		border-radius: 46rpx;
		margin: 30rpx 0;
	}

	.gray {
		position: relative;
	}

	.red {
		position: absolute;
		top: 0rpx;
		left: -10rpx;
	}
</style>

<template>
	<view class="content">
		<view class="tip between-flex m-top30 f28">
			<view>创建人:{{user}}</view>
			<view>创建时间: {{date | alltime}}</view>
		</view>

		<view class="box" style="padding-bottom: 0;">
			<view class="textColor f32 bold p-bottom30">任务信息</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>任务名称</view>
				<input type="text" class="ipt" v-model="taskName" placeholder="请输入" />

			</view>
			<view class="line2 between-flex f28 p-top20">
				<view class="gray"><span class="red">*</span>详细描述</view>
				<textarea class="des textColor" style="height:120rpx;" v-model="taskDesc" placeholder="请输入详细描述"
					placeholder-class="gray" />

			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>提出人</view>
				<view class="blue" @click="peopleType=1; $navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">
					{{giveUser?giveUser.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>提出科室</view>
				<view class="blue" @click="$navTo(PagesCourseRouterConfig.ChooseDept)">{{dept?dept.name:'选择科室'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>提出日期</view>
				<picker mode="date" @change="chooseDate($event,1)">
					<view class="blue">{{giveTime?giveTime:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>

			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>责任人</view>
				<view class="blue" @click="peopleType=2; $navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">
					{{leaderUser?leaderUser.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>

			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>审核人</view>
				<view class="blue" @click="peopleType=3; $navTo(PagesCourseRouterConfig.ChoosePerson+'?type=2')">
					{{auditUser?auditUser.name:'请选择'}}
					<u-icon name='arrow-right'></u-icon>
				</view>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>计划开始时间</view>
				<picker mode="date" @change="chooseDate($event,2)">
					<view class="blue">{{planStartDate?planStartDate:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
			<view class="line between-flex f28">
				<view class="gray"><span class="red">*</span>计划结束时间</view>
				<picker mode="date" @change="chooseDate($event,3)">
					<view class="blue">{{planEndDate?planEndDate:'请选择'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</picker>
			</view>
		</view>
		<view class="box " style="padding-bottom: 0;">
			<view class="between-flex p-bottom30">
				<view class="f32 bold textColor">附件</view>
				<view class="btns align-flex">
					<view class="btn center-flex blue m-right20" @click="chooseImg">拍照</view>
					<view class="btn center-flex blue" @click="uploadfile">上传附件</view>
				</view>
			</view>

			<view class="line between-flex f28" v-for="item,index in enclosure" :key="index">
				<view class="align-flex blue" @click="$open(item.url)">
					<u-icon name="file-text" color="#409EFF" size="38"></u-icon>
					{{item.fileName.substring(item.fileName.length-10)}}
				</view>
				<view class="gray">
					<u-icon name='close' @click="delfile(index)"></u-icon>
				</view>
			</view>



		</view>
		<view class="box " style="padding-bottom: 0;">
			<view class="between-flex m-bottom30">
				<view class="f32 bold textColor">更多信息</view>
				<view class="align-flex f28">

					<u-switch v-model="checked" active-color="#409EFF" inactive-color="#DEE2EE"></u-switch>

				</view>
			</view>
			<view class="" v-if="checked">
				<view class="line between-flex f28 ">
					<view class="gray"><span class="red">*</span>紧急程度</view>
					<picker class="choosearea" mode="selector" :range="dic.itemLevel" range-key="name"
						@change="chooseOther($event,1)">
						<view class="blue">{{level?level.name:'请选择'}}
							<u-icon name='arrow-right'></u-icon>
						</view>
					</picker>
				</view>
				<view class="line between-flex f28 ">
					<view class="gray">任务分类</view>
					<picker class="choosearea" mode="selector" :range="dic.taskType" range-key="name"
						@change="chooseOther($event,2)">
						<view class="blue">{{taskType?taskType.name:'请选择'}}
							<u-icon name='arrow-right'></u-icon>
						</view>
					</picker>
				</view>
				<view class="line between-flex f28 ">
					<view class="gray">所属项目</view>
					<view class="blue" @click="$navTo(PagesCourseRouterConfig.ChooseProject)">
						{{project?project.name:'请选择 （没有则不选）'}}
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="line between-flex f28 ">
					<view class="gray">参与人</view>
					<view class="blue align-flex"
						@click="peopleType=0;!person?$navTo(PagesCourseRouterConfig.ChoosePerson): $navTo(PagesCourseRouterConfig.ChoosePerson+'?users='+person.value)">
						<span v-if="!person||!person.value">请选择</span>
						<span v-else class=" align-flex">
							<view style="max-width:370rpx;" class="one">{{person.value | users}}</view>
							等{{person.value.split(',').length}}人
						</span>
						<u-icon name='arrow-right'></u-icon>
					</view>
				</view>
				<view class="line between-flex f28 ">
					<view class="gray">必须提交文档</view>
					<picker style="width:400rpx;" class="choosearea" mode="selector" :range="Attr"
						@change="chooseOther($event,3)">
						<view class="blue">{{mustAttr==0?'否':'是'}}
							<u-icon name='arrow-right'></u-icon>
						</view>
					</picker>

				</view>
				<view class="line between-flex f28">
					<view class="gray"><span class="red">*</span>预计工时（单位：天）</view>
					<input type="text" class="ipt" style="width:300rpx;" v-model="planDays" placeholder="请输入" />

				</view>
			</view>

		</view>


		<view class="space"></view>
		<view class="footer between-flex paddingBottom">
			<view class="lbtn center-flex cfff f32 bold bgblue" @click="submit">{{id?'保存编辑':'添加任务'}}</view>
		</view>
	</view>
</template>

<script>
	import PagesCourseRouterConfig from '@/pagesCourse/routerConfig.js'
	export default {
		data() {
			return {
				PagesCourseRouterConfig,
				dic: uni.getStorageSync('dic'),
				user: uni.getStorageSync('username'),
				navheight: 0,
				head: this.$head,
				checked: true,
				date: new Date().getTime(),
				taskName: '',
				taskDesc: '',
				giveTime: '',
				planStartDate: '',
				planEndDate: '',
				peopleType: 0, //1提出人，2责任人，3审核人
				giveUser: null, //提出人
				leaderUser: null, //责任人
				auditUser: null, //审核人
				enclosure: [], //附件
				project: null, //所属项目
				level: null, //紧急程度
				taskType: null, //任务类型
				mustAttr: 0, //是否必须上传文档
				Attr: ['否', '是'],
				planDays: '',
				person: null, //参与人
				dept: null,
				id: 0
			}
		},
		onLoad(e) {
			this.getdate()
			this.getMyId()
			uni.$on('choosePerson', (data) => {
				console.log(data)
				if (this.peopleType == 1) {
					this.giveUser = data
				} else if (this.peopleType == 2) {
					this.leaderUser = data
				} else if (this.peopleType == 3) {
					this.auditUser = data
				}
			})
			if (e.hasOwnProperty('id')) {
				this.id = e.id
				this.getInfo()
				uni.setNavigationBarTitle({
					title:'编辑任务'
				})
			}
		},
		beforeDestroy() {
			uni.$off('choosePerson')
		},
		methods: {
			getInfo() {
				this.$pop.ajaxPost('/bus/taskInfo/details', {
					id: this.id
				}).then(res => {
					var info = res.body
					if (info.attachment) {
						this.enclosure = JSON.parse(info.attachment)
						this.enclosure.forEach(item => {
							item.fileName = item.name
						})
					}
					this.taskName = info.taskName
					this.taskDesc = info.taskDesc
					if (info.giveUser) {
						this.giveUser = this.$getOtherUser(info.giveUser)
					}
					if (info.officeId) {
						this.dept = this.$getdept(info.officeId)
					}
					if (info.leaderUser) {
						this.leaderUser = this.$getOtherUser(info.leaderUser)
					}
					if (info.auditUser) {
						this.auditUser = this.$getOtherUser(info.auditUser)
					}
					
					if (info.planStartDate) {
						this.planStartDate = info.planStartDate
					}
					if (info.planEndDate) {
						this.planEndDate = info.planEndDate
					}
					if (info.planDays) {
						this.planDays = info.planDays
					}
					if (info.level) {
						this.level = this.$getLevel(info.level)
					}
					if (info.partUser) {
						var partUser=info.partUser.join(',')
						console.log(partUser)
						this.person = this.$getOtherUser(partUser)
					}
					this.mustAttr=info.mustAttr
					if (info.taskTypeId) {
						this.taskType = this.$getTasktype(info.taskTypeId)
					}
					if(info.itemCode){
						this.getProjectInfo(info.itemCode)
					}
				})
			},
			getProjectInfo(itemCode){
				this.$pop.ajaxPost('/busItemInfo/getWorkDetail', {
					itemCode:itemCode
				}).then(res=>{
					this.project={
						name:res.body.info.title,
						value:res.body.info.itemCode
					}
				})
			},
			submit() {
				if (!this.taskName) {
					this.$msg('请输入任务名称！')
					return
				}
				if (!this.taskDesc) {
					this.$msg('请输入任务描述！')
					return
				}
				if (!this.giveUser) {
					this.$msg('请选择提出人！')
					return
				}
				if (!this.dept) {
					this.$msg('请选择提出科室')
					return
				}
				if (!this.leaderUser) {
					this.$msg('请选择责任人！')
					return
				}
				if (!this.auditUser) {
					this.$msg('请选择审核人！')
					return
				}
				if (!this.planEndDate) {
					this.$msg('请选择计划结束时间！')
					return
				}
				if (!this.level) {
					this.$msg('请选择紧急程度！')
					return
				}


				if (!this.planDays) {
					this.$msg('请输入预计工时！')
					return
				}
				var obj = {
					taskName: this.taskName,
					taskDesc: this.taskDesc,
					giveUser: this.giveUser.value,
					giveTime: this.giveTime,
					leaderUser: this.leaderUser.value,
					auditUser: this.auditUser.value,
					planStartDate: this.planStartDate,
					planEndDate: this.planEndDate,
					taskChildJson: '[]',
					level: this.level.value,
					taskTypeId: this.taskType ? this.taskType.value : '',
					partUserJson: this.person ? this.person.value : '',
					mustAttr: this.mustAttr,
					planDays: this.planDays,
					itemCode: this.project ? this.project.value : '',
					officeId: this.dept.id,
					states: 1
				}

				var enclosure = []
				this.enclosure.forEach(item => {
					enclosure.push({
						name: item.oldName||item.fileName,
						url: item.url
					})
				})
				obj['attachment'] = JSON.stringify(enclosure)
				console.log(obj)
				this.$showloading()
				var url = "/bus/taskInfo/add"
				if (this.id) {
					url = "/bus/taskInfo/edit"
					obj.id = this.id
				}
				this.$pop.ajaxPost(url, obj).then((res) => {
					uni.hideLoading()
					if (res.code == 0) {

						this.$msg(res.msg)
						obj.id = res.body
						if(this.id){
							
							uni.$emit('editTask')
						}else{
							uni.$emit('addTask', obj)
						}
						
						setTimeout(() => {
							uni.navigateBack({

							})
						}, 1500)
					} else {
						this.$msg(res.msg)
					}
				})
			},
			getdate() {
				var date = new Date();

				this.date = parseInt(date.getTime() / 1000)
				var seperator1 = "-";
				var seperator2 = ":";
				var month = date.getMonth() + 1;
				var strDate = date.getDate();
				var hour = date.getHours()
				var min = date.getMinutes()
				month < 10 ? month = '0' + month : ''
				strDate < 10 ? strDate = '0' + strDate : ''
				hour < 10 ? hour = '0' + hour : ''
				min < 10 ? min = '0' + min : ''
				var currentdate = date.getFullYear() + seperator1 + month + seperator1 + strDate
				this.planStartDate = currentdate
				this.giveTime = currentdate;
			},
			getMyId() {
				var id = 0
				var list = uni.getStorageSync('user')
				for (var key in list) {
					if (list[key] == uni.getStorageSync('username')) {
						id = key
					}
				}
				this.giveUser = {
					name: uni.getStorageSync('username'),
					value: id
				}
			},
			chooseDate(e, type) {
				if (type == 1) {
					this.giveTime = e.detail.value
				} else if (type == 2) {
					this.planStartDate = e.detail.value
				} else {
					this.planEndDate = e.detail.value
				}
			},
			chooseOther(e, type) {
				if (type == 1) {
					this.level = this.dic.itemLevel[e.detail.value]
				} else if (type == 2) {

					this.taskType = this.dic.taskType[e.detail.value]
				} else if (type == 3) {
					this.mustAttr = e.detail.value
				}
			},
			delfile(index) {
				this.enclosure.splice(index, 1)
			},
			//选择图片
			async chooseImg() {

				var file = await this.$chooseImg()

				this.enclosure.push(file)

			},
			async uploadfile() {

				var file = await this.$uploadfile()
				this.enclosure.push(file)

			},
		}
	}
</script>
